<template>
  <div ref="charts" id="charts"></div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import data from './mock'
import * as echarts from "echarts";

const charts = ref(null)
const options = ref({
  title: {
    text: '注液前重量的I-MR-R/S(组间/组内)控制图',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis'
  },
  grid: {
    left: '5%',
    right: '15%',
    bottom: '10%'
  },
  xAxis: {
    // type: 'category',
    data: data.map(function (item, index) {
      return index + 1;
    })
  },
  yAxis: {},
  // toolbox: {
  //   right: 10,
  //   feature: {
  //     dataZoom: {
  //       yAxisIndex: 'none'
  //     },
  //     restore: {},
  //     saveAsImage: {}
  //   }
  // },
  dataZoom: [
    {
      startValue: '4000'
    },
    {
      type: 'inside'
    }
  ],
  visualMap: {
    top: 50,
    right: 10,
    pieces: [
      {
        gt: 0,
        lte: 150,
        color: '#93CE07'
      },
      {
        gt: 150,
        lte: 200,
        color: '#FC7D02'
      },
      {
        gt: 200,
        lte: 220,
        color: '#FD0100'
      },
      {
        gt: 220,
        lte: 250,
        color: '#AA069F'
      },
      {
        gt: 250,
        lte: 300,
        color: '#AC3B2A'
      },
      {
        gt: 300,
        color: '#d20707'
      }
    ],
    outOfRange: {
      color: '#999'
    }
  },
  series: {
    name: '注液前重量',
    type: 'line',
    itemStyle: {
      borderWidth: 5
    },
    data: data.map(function (item) {
      if (item > 300) {
        return {
          value: item, symbol: 'rect', symbolSize: 10, label: {
            show: true, position: 'top', formatter: function () {
              return 1
            }
          }
        }
      }
      return item;
    }),
    markLine: {
      silent: true,
      lineStyle: {
        color: 'red'
      },
      data: [
        {
          yAxis: 50,
          label: {
            formatter: function () {
              return 'LCL = 50'
            }
          }
        },
        {
          yAxis: 250,
          label: {
            formatter: function () {
              return 'AGV = 250'
            }
          }
        },
        {
          yAxis: 300,
          label: {
            formatter: function () {
              return 'UCL = 300'
            }
          }
        }
      ]
    }
  }
})

onMounted(() => {
  const myChart = echarts.init(charts.value)
  myChart.setOption(options.value)
})

</script>

<style scoped>
#charts {
  margin: auto;
  width: calc(100% - 30px);
  height: 100%;
}
</style>